<!--
 * 高德地图基本展示
 * @Author: bobo
 * @Date: 2021-01-07 16:43:39
-->

<template>
  <div class="root-container">
    <div id="container"></div>

    <div class="video-div">
      <el-button type="primary" @click="openVideo">打开视频</el-button>
      <el-button type="primary" @click="closeVideo">关闭视频</el-button>
      <div>
        <BaseFlvPlayer ref="player0" v-bind:supportDrag="true" :is-show="isShow">
          <template v-slot:custom-cover>
            <SimplePlayerControls></SimplePlayerControls>
          </template>
        </BaseFlvPlayer>
      </div>
    </div>
  </div>
</template>

<script>
import AMap from "AMap";
import BaseFlvPlayer from "@/components/player/BaseFlvPlayer.vue";
import SimplePlayerControls from "@/components/player/SimplePlayerControls";
export default {
  components: {
    BaseFlvPlayer,
    SimplePlayerControls,
  },
  data() {
    return {
      map: null,
      isShow: false,
    };
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始化地图层级
        center: [116.397428, 39.90923], //初始化地图中心点
      });
      this.map.on("complete", function () {
        console.log("地图加载完成！");
      });
    },
    openVideo() {
      this.isShow = true;
      const logControl = this.$refs.player0.getLoggingControl();
      logControl.forceGlobalTag = true;
      console.log(logControl.getConfig());
      this.$refs.player0.load(
        {
          type: "flv",
          enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
          isLive: true,
          hasAudio: false,
          stashInitialSize: 128,
          enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
          url: "https://flvopen.ys7.com:9188/openlive/0064df87febe48da91db6f13ee03be3d.hd.flv",
          // url: "http://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv",
        },
        {
          enableWorker: false,
          lazyLoadMaxDuration: 60,
          seekType: "range",
        },
      );
    },
    closeVideo() {
      this.$refs.player0.close();
      this.isShow = false;
    },
  },
  mounted() {
    this.initMap();
  },
  destroyed() {
    //卸载地图资源
    this.map.destroy();
  },
};
</script>

<style  lang='scss' scoped>
root-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#container {
  width: 100%;
  height: 100%;
  position: absolute;
}
.video-div {
  position: absolute;
}
</style>
